<template>
  <div class="login-box">
    <PageTitle>重置密码</PageTitle>
    <div class="icon-box flex-box">
      <img src="@/assets/img/gb-new_01.png">
    </div>
    <div class="reset-box" v-if="showPageA">
      <ul class="login-lists">
        <li>
          <button class="acount-type" @click="selectType">账号类型：{{acountName}}</button>
          <div class="clear-btn acount-select" @click="selectType">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-T_xiajiantou_xjt"></use>
            </svg>
          </div>
        </li>
        <li v-if="!(acountId===3 || acountId===4)">
          <input type="text" v-model="sfzNumber" @input="clearTxt('sfzTips')" :placeholder="acountName" @blur="checkInput(1)">
          <div class="clear-btn" v-show="sfzNumber.trim()" @click="clearTxt('sfzNumber,sfzTips')">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-untitled94"></use>
            </svg>
          </div>
        </li>
        <LogTips :tips="sfzTips" v-if="sfzTips.trim()"></LogTips>
        <li>
          <input type="text" v-model="acountNumber" @input="clearTxt('acountTips')" :placeholder="acountPlace" @blur="checkInput(2)">
          <div class="clear-btn" v-show="acountNumber.trim()" @click="clearTxt('acountNumber,acountTips')">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-untitled94"></use>
            </svg>
          </div>
        </li>
        <LogTips :tips="acountTips" v-if="acountTips.trim()"></LogTips>
        <li class="yan-zheng">
          <input type="number"  @input="clearTxt('yzmTips')" oninput="if(value.length>4)value=value.slice(0,4)" @blur="checkInput(3)"
            v-model="yanZhengMa" placeholder="图形验证码">
          <div class="yzm-box" @click="resetYzm">
            <img :src="yamLoading">
          </div>
        </li>
        <LogTips :tips="yzmTips" v-if="yzmTips.trim()"></LogTips>
      </ul>
      <div class="reset-tips">
        <p>
          <span>友情提示：</span>鉴于最近运营商进行手机短信整顿，会导致个别短信无法及时送达， 建议您采用邮箱的方式。
        </p>
      </div>
      <div class="commit-btn">
        <button @click="submitGetCheck" class="flex-box" :disabled="submitAble">
          <span class="flex-box" v-show="!updateIng">获取 短信/邮件 验证码</span>
          <span class="flex-box" v-show="updateIng">处理中 <img src="../../assets/img/more-loading-w.gif"></span>
        </button>
      </div>
    </div>
    <transition mode="out-in"
      name="slide-right"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <div class="reset-box" v-if="!showPageA">
        <ul class="login-lists">
          <li>
            <input type="number" v-model="yzmNumber" @input="clearTxt('yzmNumberTips')" @blur="checkPasswordA" oninput="if(value.length>5)value=value.slice(0,5)" placeholder="短信/邮箱验证码">
            <div class="clear-btn" v-show="yzmNumber.trim()" @click="clearTxt('yzmNumber')">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-untitled94"></use>
              </svg>
            </div>
          </li>
          <LogTips :tips="yzmNumberTips" v-if="yzmNumberTips.trim()"></LogTips>
          <li>
            <input type="password" v-model="passwordSetA" @input="clearTxt('passwordATips')" @blur="checkPasswordB" placeholder="新密码">
            <div class="password-level" v-show="passwordSetA">
              <span :class="{active:passwordLevel>0}"></span>
              <span :class="{active:passwordLevel>1}"></span>
              <span :class="{active:passwordLevel>2}"></span>
            </div>
            <div class="password-level-desc" v-show="passwordSetA">
              <p :class="{active: passwordLevel===1}">弱</p>
              <p :class="{active: passwordLevel===2}">中</p>
              <p :class="{active: passwordLevel===3}">强</p>
            </div>
          </li>
          <LogTips :tips="passwordATips" v-if="passwordATips.trim()"></LogTips>
          <li>
            <input type="password" v-model="passwordSetB" @input="clearTxt('passwordBTips')" @blur="checkPasswordC" placeholder="确认密码">
          </li>
          <LogTips :tips="passwordBTips" v-if="passwordBTips.trim()"></LogTips>
        </ul>
        <div class="commit-btn">
          <button :disabled = "btnAble" @click="resetPasswordSubmit" class="flex-box">
            <span class="flex-box" v-show="!updateIng">确认</span>
            <span class="flex-box" v-show="updateIng">处理中 <img src="../../assets/img/more-loading-w.gif"></span>
          </button>
        </div>
        <div class="back-step">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gb-xiazai6"></use>
          </svg> <p @click="backStep">返回上一步</p>
        </div>
      </div>
    </transition>
    <div class="type-select" v-show="showSelect" @click.self="closeSelect">
      <transition mode="out-in"
      name="slide-up"
      :enter-active-class='"slide-active"'
      :leave-active-class='"slide-active"'>
        <ul v-show="showSelect">
          <li v-for="(item,index) in acountType" :key="index" @click="setAcountType(item.id,item.name)">
            {{item.name}}
          </li>
        </ul>
      </transition>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import LogTips from '@/components/Login/LogTips.vue'
export default {
  name: 'home',
  data() {
    return {
      showPageA: true,
      showSelect: false,
      sfzNumber: '',
      acountId: 2,
      acountName: '身份证/证件号',
      acountNumber: '',
      guid: '',
      acountPlace: '邮箱或手机号',
      yzmNumber: '',
      yanZhengMa: '',
      updateIng: false,
      passwordSetA: '',
      passwordSetB: '',
      yamLoading: '',
      sfzTips: '',
      acountTips: '',
      yzmTips: '',
      yzmNumberTips: '',
      passwordATips: '',
      passwordBTips: '',
      mailTest: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/,
      phoneTest: /^1[23456789]\d{9}$/,
      // sfIdTest: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
      acountType: [
        {
          id: 2,
          name: '身份证/证件号'
        },
        {
          id: 1,
          name: '华大 ID'
        },
        {
          id: 0,
          name: '用户名'
        },
        {
          id: 3,
          name: '手机号码'
        },
        {
          id: 4,
          name: '邮箱'
        }
      ]
    }
  },
  components: {
    LogTips
  },
  computed: {
    passwordLevel: function() {
      let levelA = /(?=.*[0-9])(?=.*[a-zA-Z]).{6,20}/,
        levelB = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}/,
        levelC = /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{6,20}/
      if (levelC.test(this.passwordSetA)) {
        return 3
      } else if (levelB.test(this.passwordSetA)) {
        return 2
      } else if (levelA.test(this.passwordSetA)) {
        return 1
      } else {
        return false
      }
    },
    btnAble: function() {
      return this.passwordLevel && this.passwordSetA === this.passwordSetB && !this.updateIng
        ? false
        : true
    },
    submitAble: function() {
      if (this.updateIng) {
        return true
      } else {
        let acountCheck =
            (this.mailTest.test(this.acountNumber) || this.phoneTest.test(this.acountNumber)) &&
            !this.testGenomicsMail(this.acountNumber),
          yzmCheck = /\d{4}/.test(this.yanZhengMa)
        if (this.acountId === 0 || this.acountId === 1 || this.acountId === 2) {
          if (this.sfzNumber.trim() && acountCheck && yzmCheck) {
            return false
          } else {
            return true
          }
        } else if (this.acountId === 3) {
          if (this.phoneTest.test(this.acountNumber) && yzmCheck) {
            return false
          } else {
            return true
          }
        } else if (this.acountId === 4) {
          if (this.mailTest.test(this.acountNumber) && yzmCheck) {
            return false
          } else {
            return true
          }
        } else {
          return true
        }
        // return false
      }
    }
  },
  methods: {
    clearTxt(data) {
      data.split(',').forEach(item => {
        this[item] = ''
      })
    },
    selectType() {
      this.showSelect = true
    },
    closeSelect() {
      this.showSelect = false
    },
    checkPasswordA() {
      if (!this.yzmNumber.trim()) {
        this.yzmNumberTips = '请输入验证码'
      }
    },
    checkPasswordB() {
      if (!this.passwordSetA.trim()) {
        this.passwordATips = '请输入新密码'
      }
    },
    backStep() {
      this.showPageA = true
    },
    checkPasswordC() {
      if (!this.passwordSetB.trim()) {
        this.passwordBTips = '请输入新密码'
      } else if (this.passwordSetA != this.passwordSetB) {
        this.passwordBTips = '两次密码输入不一致'
      }
    },
    testGenomicsMail(value) {
      var mail_last = value.substring(value.lastIndexOf('@') + 1)
      mail_last = mail_last.toLowerCase()
      if (
        mail_last == 'genomics.org.cn' ||
        mail_last == 'bgiamericas.com' ||
        mail_last == 'genomics.cn' ||
        mail_last == 'bgitechsolutions.com' ||
        mail_last == 'bgihealthamericas.com' ||
        mail_last == 'genomics.org.cn'
      ) {
        return true
      } else {
        return false
      }
    },
    checkInput(state) {
      console.log(state)
      if (state === 1) {
        if (!this.sfzNumber.trim()) {
          this.sfzTips = '✱ 请输入' + this.acountName
        }
      } else if (state === 2) {
        if (!(this.mailTest.test(this.acountNumber) || this.phoneTest.test(this.acountNumber))) {
          if (this.acountId === 3) {
            if (!this.acountNumber.trim()) {
              this.acountTips = '✱ 请输入手机号'
            } else {
              this.acountTips = '✱ 请输入正确的手机号'
            }
          } else if (this.acountId === 4) {
            if (!this.acountNumber.trim()) {
              this.acountTips = '✱ 请输入邮箱'
            } else {
              this.acountTips = '✱ 请输入正确的邮箱'
            }
          } else {
            if (!this.acountNumber.trim()) {
              this.acountTips = '✱ 请输入邮箱/手机号'
            } else {
              this.acountTips = '✱ 请输入正确的邮箱/手机号'
            }
          }
        } else if (
          this.mailTest.test(this.acountNumber) &&
          this.testGenomicsMail(this.acountNumber)
        ) {
          this.acountTips = '✱ 请登录华大邮箱系统修改密码'
        }
      } else if (state === 3) {
        if (!/\d{4}/.test(this.yanZhengMa)) {
          this.yzmTips = '✱ 请输入正确图片验证码'
        }
      }
    },
    resetPasswordSubmit() {
      this.updateIng = true
      let data = {
        guid: this.guid,
        activecode: this.yzmNumber,
        password: this.$md5(this.passwordSetA.toLowerCase()),
        targetUrl: '',
        islogin: this.$store.state.global.isLogIn ? 1 : 0
      }
      this.$API.resetPassword(qs.stringify(data)).then(res => {
        this.updateIng = false
        console.log(res)
        switch (res.flag) {
          case '0':
            localStorage.setItem(
              'loginAcountMsg',
              JSON.stringify({
                loginname: this.acountNumber,
                password: '',
                page: 2
              })
            )
            this.$router.replace({ path: '/success', query: { type: 2 } })
            break
          case '1':
            this.$msg('修改密码失败')
            break
          case '2':
            this.$msg('验证码错误或失效')
            break
          case '3':
            this.$msg('该账户已被禁用')
            break
          case '4':
            this.$msg('该账户未激活')
            break
          case '5':
            this.$msg('修改密码失败')
            break
          default:
            this.$msg('修改密码失败')
            break
        }
      })
    },
    setAcountType(id, name) {
      this.acountId = id
      this.acountName = name
      this.sfzTips = ''
      this.acountTips = ''
      this.yzmTips = ''
      if (id === 3) {
        this.acountPlace = '手机号'
        this.sfzNumber = ''
      } else if (id === 4) {
        this.acountPlace = '邮箱'
        this.sfzNumber = ''
      } else {
        this.acountPlace = '邮箱或手机号'
      }
      this.closeSelect()
    },
    resetYzm() {
      this.yanZhengMa = ''
      this.yzmTips = ''
      this.yamLoading = require('../../assets/img/loading.gif')
      this.$API.resetRandomYzm().then(data => {
        this.yamLoading = data
      })
    },
    submitGetCheck() {
      let data = {
        logintype: this.acountId,
        loginname: this.acountId === 3 || this.acountId === 4 ? this.acountNumber : this.sfzNumber,
        address: this.acountId === 3 || this.acountId === 4 ? '' : this.acountNumber,
        vcode: this.yanZhengMa
      }
      this.updateIng = true
      this.$API.submitGetCheck(qs.stringify(data)).then(res => {
        console.log(res)
        this.updateIng = false
        switch (res.flag) {
          case '0':
            this.guid = res.guid
            this.showPageA = false
            break
          case '1':
            if (this.acountId == 3 || this.acountId == 4) {
              this.$msg(this.acountName + '错误')
            } else {
              this.$msg(this.acountName + '、邮箱或手机号错误')
            }
            break
          case '2':
            if (this.acountId == 3 || this.acountId == 4) {
              this.$msg(this.acountName + '错误')
            } else {
              this.$msg(this.acountName + '、邮箱或手机号错误')
            }
            break
          case '3':
            this.$msg('无法识别账号，请选择其他账号')
            break
          case '4':
            this.$msg('该账号已被禁用')
            break
          case '5':
            this.$msg('该账号未激活')
            break
          case '6':
            this.$msg('获取验证码失败')
            break
          case '7':
            this.$msg('获取验证码失败')
            break
          case '50':
            this.$msg('图片验证码错误或失效')
            break
          default:
            this.$msg('获取验证码失败')
            break
        }
      })
    }
  },
  created() {
    this.resetYzm()
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #f3f8fb;
  .icon-box {
    width: 100%;
    height: 100px;
    img {
      width: 115px;
    }
  }
  .type-select {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 669999999;
    background: rgba($color: #000000, $alpha: 0.75);
    ul {
      display: block;
      width: 100%;
      position: absolute;
      background: #fff;
      left: 0;
      bottom: 0;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      padding: 12px 15px;
      box-sizing: border-box;
      li {
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #666;
        font-size: 16px;
        border-bottom: 1px solid #f0f0f0;
        &:last-child {
          border: none;
        }
      }
    }
  }
  h1 {
    font-size: 18px;
    color: #333;
    line-height: 56px;
    text-align: center;
    font-weight: bold;
    margin-top: 24px;
  }
  .reset-box {
    width: 100%;
  }
  .reset-tips {
    width: 100%;
    text-align: left;
    margin-top: 12px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 22px;
    color: #999;
    box-sizing: border-box;
    p {
      span {
        color: #1c93d0;
      }
    }
  }
  .login-lists {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    li {
      width: 100%;
      height: auto;
      line-height: 58px;
      float: left;
      border-bottom: none;
      border-top: 1px solid #dddddd;
      font-size: 16px;
      color: #717883;
      position: relative;
      box-sizing: border-box;
      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: 1px solid #dddddd;
      }
      &.error-tips {
        width: 100%;
        border: none;
        padding: 8px 0;
        line-height: 14px;
        text-align: left;
        color: #1c93d0;
        float: left;
        margin-top: -16px;
        position: relative;
        top: -4px;
        p {
          font-size: 14px;
          padding-top: 5px;
        }
      }
      .acount-type {
        width: 100%;
        height: 58px;
        border: none;
        outline: none;
        font-size: 16px;
        background: none;
        color: #717883;
        text-align: left;
        padding-left: 0;
      }
      .clear-btn {
        width: 20px;
        height: 58px;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 12px;
      }
      .acount-select {
        font-size: 18px;
      }
      input {
        width: 100%;
        height: 54px;
        line-height: 58px;
        font-size: 16px;
        border: none;
        outline: none;
        background: none;
        color: #333;
        &::-webkit-input-placeholder {
          color: #717883;
        }
      }
      .password-level,
      .password-level-desc {
        width: 90px;
        position: absolute;
        right: 0;
        top: 26px;
        span {
          display: block;
          float: left;
          margin-left: 6px;
          width: 24px;
          height: 6px;
          background: #ccc;
          &.active {
            background: #1c93d0;
          }
        }
      }
      .password-level-desc {
        top: 14px;
        height: 14px;
        p {
          width: 24px;
          font-size: 12px;
          line-height: 14px;
          display: inline-block;
          margin-left: 6px;
          opacity: 0.2;
          &.active {
            opacity: 1;
          }
        }
      }
    }
    .yan-zheng {
      padding-right: 100px;
      .yzm-box {
        position: absolute;
        width: 58px;
        height: 20px;
        top: 18px;
        right: 0;
        text-align: right;
        img {
          float: left;
          height: 100%;
          max-width: 100%;
        }
      }
    }
  }
  .commit-btn {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    button {
      width: 100%;
      height: 42px;
      font-size: 16px;
      color: #fff;
      background: #1c93d0;
      font-weight: bold;
      border: none;
      margin-top: 20px;
      border-radius: 5px;
      &:disabled {
        opacity: 0.5 !important;
      }
    }
  }
  .back-step {
    width: 100%;
    text-align: right;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 18px;
    color: #1c93d0;
    p {
      display: inline-block;
    }
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-right-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-up-leave-to,
.slide-up-enter {
  opacity: 0;
  transform: translate3d(0, 50%, 0);
}
</style>
